@charset "utf-8";
@import "common";

.details-box{
	margin-top: 3%;
	.details-box-personal{
		.details-box-img{
			img{
				width: 110%;
			}
		}
	}
	.details-cont{
		h4{
			font-size: 30px;
			font-weight: bold;
			text-align: right;
			margin-right: 2%;
		}
		p{
			font-size: 12px;
			color: #bbbbbb;
			text-align: right;
			line-height: 250%;
			margin-right: 2%;
		}
		.details-cont-box{
			display: flex;
			flex-wrap: wrap;
			ul{
				padding: 0;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				flex-basis: 100%;
				li{
					.details-cont-img{
						img{
							width: 95%;
						}
					}
				}
			}
		}
	}
}

.details-box-two{
	margin-top: 3%;
	.details-box-personal{
		.details-box-img{
			// margin-right: 5%;
			img{
				width: 110%;
			}
		}
	}
	.details-cont{
		h4{
			font-size: 30px;
			font-weight: bold;
		}
		p{
			font-size: 12px;
			color: #bbbbbb;
			line-height: 250%;
		}
		.details-cont-box{
			display: flex;
			flex-wrap: wrap;
			ul{
				padding: 0;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				flex-basis: 100%;
				li{
					.details-cont-img{
						img{
							width: 95%;
						}
					}
				}
			}
		}
	}
}
.case-box{
	margin-top: 7%;
	h4{
		font-size: 30px;
		font-weight: bold;
	}
	.case-box-img{
		ul{
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			li{
				margin-right: 2%;
				.case-img{
					margin-top: 5%;
					position: relative;
					img{
						width: 270px;
						height: 130px;
					}
					.mask{
						width: 100%;
						height: 100%;
						background-color: rgba(0,0,0,.7);
						position: absolute;
						top: 0;
						left: 0;
						color: #fff;
						font-size: 12px;
						display: none;
						p{
							font-size: 12px;
							text-align: left;
							text-align: justify;
							padding: 4% 4%;
						}
					}
					&:hover .mask{
						display: block;
					}
				}
				.p{
					text-align: center;
					font-size: 14px;
					line-height: 250%;
				}
			}
		}
	}
}
@media only screen and (min-width:768px) and (max-width:991px) {
	.details-box{
		.details-box-personal{
			.details-box-img{
				margin-top: 20%;
			}
		}
	}
	.details-box-two{
		.details-box-personal{
			.details-box-img{
				margin-top: 20%;
				img{
					width: 100%;
				}
			}
		}
		.details-cont{
			p{
				text-align: justify;
				margin-right: 2%;
			}
		}
	}
	.case-box{
		.case-box-img{
			ul{
				li{
					.case-img{
						img{
							width: 230px;
							height: 110px;
						}
					}
				}
			}
		}
	}
}
@media only screen and (min-width:320px) and (max-width:767px) {
	.details-box{
		.details-box-personal{
			.details-box-img{
				text-align: center;
				img{
					width: 70%;
				}
			}
		}
		.details-cont{
			h4{
				text-align: left;
			}
			p{
				text-align: justify;
			}
		}
	}
	.details-box-two{
		.details-box-personal{
			.details-box-img{
				text-align: center;
				img{
					width: 70%;
				}
			}
		}
		.details-cont{
			p{
				text-align: justify;
			}
		}
	}
	.case-box{
		h4{
			text-align: center;
		}
		.case-box-img{
			ul{
				justify-content: center;
				li{
					.case-img{
						text-align: center;
						img{
							width: 290px;
						}
					}
				}
			}
		}
	}
}
@media only screen and (min-width:992px) and (max-width:1199px) {
	.details-box{
		.details-box-personal{
			.details-box-img{
				margin-top: 20%;
			}
		}
	}
	.details-box-two{
		.details-box-personal{
			.details-box-img{
				margin-top: 20%;
				img{
					width: 100%;
				}
			}
		}
		.details-cont{
			p{
				text-align: justify;
				margin-right: 2%;
			}
		}
	}
	.case-box{
		.case-box-img{
			ul{
				li{
					.case-img{
						img{
							width: 197px;
							height: 100px;
						}
					}
				}
			}
		}
	}
}